@use "../variables" as *;

.spg-boolean-switch,
.spg-boolean-switch * {
  box-sizing: border-box;
}

.spg-boolean-switch {
  display: flex;
  flex-direction: row;
  gap: var(--ctr-toggle-button-gap-label, var(--sjs-spacing-x1));
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.spg-boolean-switch__button {
  background: var(--ctr-toggle-button-background-color, var(--sjs-layer-3-background-500, #f4f4f4ff));
  outline: none;
  border-radius: var(--ctr-toggle-button-corner-radius, var(--sjs-corner-radius-round));
  box-shadow: 0px 0px 0px 1px var(--ctr-toggle-button-border-color, var(--sjs-border-10, #dcdcdcff));
  padding: var(--ctr-toggle-button-padding-top, var(--sjs-font-size-x075)) var(--ctr-toggle-button-padding-right, var(--sjs-font-size-x075))
    var(--ctr-toggle-button-padding-bottom, var(--sjs-font-size-x075)) var(--ctr-toggle-button-padding-left, var(--sjs-font-size-x075));
  display: flex;
  flex-direction: row;
  gap: var(--ctr-toggle-button-gap, var(--sjs-spacing-x05));
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;

  &:focus,
  &:focus-visible {
    box-shadow: 0px 0px 0px 2px var(--ctr-toggle-button-border-color-focused, var(--sjs-primary-background-500, #19b394ff));
  }

  &:hover {
    background: var(--ctr-toggle-button-background-color-hovered, var(--sjs-layer-3-background-400, #eaeaeaff));
  }
}

.spg-boolean-switch__button--checked {
  background: var(--ctr-toggle-button-background-color-checked, var(--sjs-primary-background-500, #19b394ff));
  box-shadow: none;

  .spg-boolean-switch__thumb--left {
    background: none;
  }

  .spg-boolean-switch__thumb--right {
    background: var(--ctr-toggle-button-thumb-background-color-checked, var(--sjs-primary-foreground-100, #ffffffff));
  }

  &:hover {
    background: var(--ctr-toggle-button-background-color-checked, var(--sjs-primary-background-500, #19b394ff));
  }

  &:focus {
    background: var(--ctr-toggle-button-background-color-checked-focused, var(--sjs-primary-foreground-100, #ffffff));

    .spg-boolean-switch__thumb--right {
      background: var(
        --ctr-toggle-button-thumb-background-color-checked-focused,
        var(--sjs-primary-background-500, #19b394)
      );
    }
  }
}

.spg-boolean-switch__thumb {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.spg-boolean-switch__thumb-circle {
  border-radius: var(--ctr-toggle-button-thumb-corner-radius, var(--sjs-corner-radius-round));
  border: var(--ctr-toggle-button-thumb-border-width, 0px) solid var(--ctr-toggle-button-thumb-border-color, var(--sjs-border-10, #dcdcdcff));
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ctr-toggle-button-thumb-width, var(--sjs-font-size-x150));
  height: var(--ctr-toggle-button-thumb-height, var(--sjs-font-size-x150));
  position: relative;
  overflow: hidden;
}

.spg-boolean-switch__thumb--left {
  background: var(--ctr-toggle-button-thumb-background-color-active, var(--sjs-layer-3-foreground-75, #000000BF));
}

.spg-boolean-switch__thumb--right {}

.spg-boolean-switch__caption {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}

.spg-boolean-switch__title {
  @include ctrDefaultFont;

  color: var(--ctr-toggle-button-label-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
  text-align: left;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}